<template>
  <label class="uni-login-base-checkbox">
    <i class="uni-login-icon" :class="{active: value}"/>
    <input class="uni-login-input-checkbox" type="checkbox" :id="uid" :checked="value" @change="handleChange"/>
    <div class="uni-login-base-checkbox--text">
      <slot></slot>
    </div>
  </label>
</template>

<script>
export default {
  name: 'BaseCheckbox',
  components: {},
  model: {
    prop: 'value',
    event: 'change'
  },
  props: {
    uid: {
      type: String,
      default: ''
    },
    value: {
      required: true,
      type: Boolean,
      default: false
    },
    label: {
      type: String,
      default: ''
    }
  },
  data () {
    return {

    }
  },
  watch: {},
  computed: {},
  created () {
  },
  mounted () {
  },
  methods: {
    handleChange (e) {
      console.log(e.target)
      const val = e.target.checked
      console.log(val)
      this.$emit('change', val)
    }
  },
  beforeDestroy () {
  }
}
</script>
<style scoped lang="scss">
.uni-login-base-checkbox {
  position: relative;
  display: flex;
  cursor: pointer;
  line-height: 22px;
  align-items: flex-start;
  .uni-login-input-checkbox{
    position: absolute;
    left: 0;
    top: 0;
    width: 22px;
    height: 22px;
    background-color: #1b1b1b;
    opacity: 0;
    margin: 0;
    cursor: pointer;
  }
  .uni-login-base-checkbox--text{
    word-break: break-word;
  }
  .uni-login-icon{
    box-sizing: border-box;
    flex-shrink: 0;
    display: block;
    width: 22px;
    height: 22px;
    //background-image: url("@/assets/images/common/icon_checkbox.png");
    border: 1PX solid #ccc;
    transition: .3s;
    border-radius: 4px;
    margin-right: 8px;
    cursor: pointer;
    &.active{
      border: 1PX solid transparent;
      background-image: url("@/assets/images/icon_checkbox__active.png");
      background-size: cover;
      background-repeat: no-repeat;
    }
  }
}
</style>
